<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格布局-->
<!--属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
注：只对连续的英文字母起作用，如果使用中文就看不到效果-->
<style>
    table.t1{table-layout: auto}
    table.t2{table-layout: fixed}
</style>

<table class="t1" border="1" width="100%">
    <tr>
        <td width="50px">abcdefghijklmnopqrstuvwsyz</td>
        <td>abc</td>
    </tr>
</table>
<table class="t2" border="1" width="100%">
    <tr>
        <td width="50px">abcdefghijklmnopqrstuvwsyz</td>
        <td>abc</td>
    </tr>
</table>
<table class="t2" border="1" width="100%">
    <tr>
        <td width="50px">Jodi飞机阿松</td>
        <td>abc</td>
    </tr>
</table>

<!--表格边框-->
<!--属性：border-collapse
值：
separate:边框分隔
collapse:边框合并-->
<style>
    table.a1{border-collapse: separate}
    table.a2{border-collapse: collapse}
</style>

<table class="a1" border="1">
    <tr>
        <td>边框分离</td>
        <td>边框分离</td>
    </tr>
</table>
<table class="a2" border="1">
    <tr>
        <td>边框合并</td>
        <td>边框合并</td>
    </tr>
</table>
</body>
</html>